<!doctype html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="src/css/style.css">

    <title>哈特计划|哈特希</title>
</head>

<body>

    <ul class="nav justify-content-end">
        <li class="nav-item">
            <a class="nav-link disabled" href="about.html">关于</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" target="_blank" href="https://ko-fi.com/shdvapps">捐献</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="https://github.com/sh-dv/hat.sh" target="_blank"><i
                    class="fab fa-github fa-lg"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled"
                href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fpublish.twitter.com%2F%3FbuttonType%3DTweetButton%26widget%3DButton&ref_src=twsrc%5Etfw&text=Check%20Out%20This%20File%20Encryption%20app%20App:%20https://hat.sh"
                target="_blank"><i class="fab fa-twitter fa-lg"></i></a>
        </li>
    </ul>


    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">

            <div class="col sm-12 col-md-8 col-lg-6">
                <h2 class="display-4 title"><a href="index.html">哈特希 <img src="src/assets/logo.png" width="75"></a><small class="text-muted" style="font-size: 14px;"> v1.4</small></h2>
                <p class="lead">
                    一个免费，
                    <u>快速</u>，
                    <u>安全</u> 和
                    <u>Serverless</u> 的文件加密服务。<b>请使用现代主流浏览器（如 Firefox Chrome Opera），有时设备配置高低会影响加密时间。请保管好密钥，应用不会储存你的密钥。</b>
                </p>

                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="customFile">
                    <label class="custom-file-label" for="customFile">
                        <div id="file-placeholder">选择一个文件加密/解密</div>
                    </label>
                </div>

                <br>
                <br>

                <div class="form-group">
                    <div class="input-group mb-3">
                        <label for="inputPassword"></label>
                        <input type="text" id="inputPassword"
                            placeholder="输入或生成解密密钥（推荐）"
                            class="form-control mx-sm-6" aria-describedby="passwordHelpInline">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="generateButton"
                                data-toggle="tooltip" data-placement="right" title="生成安全密钥"><i
                                    class="fas fa-sync-alt"></i></button>
                        </div>
                    </div>

                    <small id="passwordHelpInline" class="text-muted">
                        <b>密码强度</b>: <span id="strength-text"></span>
                    </small>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-secondary" id="strength-meter" role="progressbar" style="width: 4;"
                            aria-valuenow="0" aria-valuemin="0" aria-valuemax="4"></div>
                    </div>
                </div>

                <button type="button" class="btn btn-outline-dark" id="encryptBtn">加密</button>
                <button type="button" class="btn btn-outline-dark" id="decryptBtn">解密</button>
                <button type="button" class="btn btn-outline-danger" id="resetBtn" style="display: none"><i
                        class="fas fa-redo"></i> 重置</button>
                <br>
                <small class="text-muted">
                    文件不会上传到服务器，所有内容都在浏览器中脱机完成。
                </small>
                <br>

                <br>
                <br>

                <div id="error"></div>

            </div>
            <!--end col-->
        </div><!-- end row -->
        <br>
        <br>

        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-sm-12 col-md-8 col-lg-6" id="results">



            </div>
            <!--end col-->
        </div><!-- end row -->

    </div><!-- end container -->
    <br>

    <div class="footer">
        <nav class="navbar  navbar-light bg-light">
            <ul class="nav navbar-nav mx-auto">
                <li class="nav-item">
                    <div class="nav-link">由 <i class="fas fa-heart" style="color:#e74c3c;"></i>
                         <a href="https://github.com/sh-dv" class="text-dark"> Shadi </a>开发和构建。
                        </div>
                </li>
            </ul>
        </nav>
    </div>
    <div class="loader">
        <div class="sk-folding-cube">
            <div class="sk-cube1 sk-cube"></div>
            <div class="sk-cube2 sk-cube"></div>
            <div class="sk-cube4 sk-cube"></div>
            <div class="sk-cube3 sk-cube"></div>
        </div>
    </div>
    <!-- bundled app file js -->
    <script src="bundle.js"></script>


</body>

</html>
